import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    WhiteSpace,
    WingBlank,
    Flex,
    Icon,
    ListView,
    Button,
    Modal
} from 'antd-mobile';
import Moment from 'moment';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import yellowJindu from "../../assets/svg/yellowJindu.svg";
import rightsvg from "../../assets/img/right.svg";
import {Toast} from "antd-mobile/lib/index";

class SecKill extends Component {
    constructor(props) {
        super(props);
        this.timer = null;
        const {goodsDetailInfo} = this.props;
        this.state = {
            d:"",
            showHour:"",
            m:"",
            s:"",
            now:goodsDetailInfo.nowTime
        }
    }
    componentDidMount(){
        setInterval(this.countTime, 1000, 1000)
        this.countTime()
    }
    startTime = (time)=>{
        let seconds = parseInt(time / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            h = '0';
            m = '00';
            s = '00';
            d = '00';
            showHour = '00';
        }
        return `${showHour}:${m}`
    }
    Time=(a)=>{
        let seconds = parseInt(a/1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        return h
    }
    countTime=()=>{
        //获取当前时间
        const {goodsDetailInfo} = this.props;
        var now = this.state.now;
        //设置截止时间
        var end = goodsDetailInfo.endTime;
        var start = goodsDetailInfo.startTime;
        let seconds = start>now?parseInt((start - now) / 1000):parseInt((end - now) / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            m = '00';
            s = '00';
            d = '00';
            showHour = '00';
        }
        this.setState({
            d:d,
            showHour:showHour,
            m:m,
            s:s,
            now:now+1000
        })
    }
    render() {
        const {goodsDetailInfo} = this.props;
        const {startTime,endTime} = goodsDetailInfo
        const {d,showHour,m,s}=this.state;
        let a = "1111";
        return <div>
            {goodsDetailInfo.startTime<goodsDetailInfo.nowTime?
                <div style={{color:"#fff",height:"100%",paddingTop:".2rem",paddingBottom:".2rem"}}>
                        <Flex justify="between" >
                            <div style={{background:"linear-gradient(164deg,rgba(249,58,98,1),rgba(255,0,54,1))",width:"70%",padding:"0 .2rem",height:"1.5rem"}}>
                                <span style={{fontSize:".35rem"}}>秒杀价</span>
                                <div style={{marginTop:".25rem"}}>
                                    ¥<span style={{fontSize:".5rem",marginRight:".2rem"}}>{goodsDetailInfo.activityPrice }</span>
                                    <span style={{textDecoration:"line-through"}}>¥{goodsDetailInfo.storePrice}</span>
                                </div>
                            </div>
                           <Flex justify="center" style={{width:"30%",background:"#ffe4ea",textAlign:"center",padding:".35rem 0"}}>
                               {goodsDetailInfo.activityInventory==0?<div style={{width:"100%"}}>
                                   <div style={{color:"#F93861",fontSize:".3rem"}}>已抢光</div>
                               </div>: <div style={{width:"100%"}}>
                                   <div style={{color:"#F93861",marginBottom:".2rem",fontSize:".3rem"}}>剩余件数</div>
                                   <Flex justify="center">
                                       {(goodsDetailInfo.activityInventory+"").split("").map((r,i)=>{
                                           return <div key={i} style={{color:"#fff",background:"#F93861",marginRight:".1rem",width:".4rem",height:".4rem",borderRadius:".05rem",display:"flex",justifyContent:"center",alignItems:"center"}}>{r}</div>
                                       })}
                                       <div  style={{color:"#fff",background:"#F93861",marginRight:".1rem",width:".4rem",height:".4rem",borderRadius:".05rem",display:"flex",justifyContent:"center",alignItems:"center"}}>件</div>
                                   </Flex>
                               </div>}
                           </Flex>
                        </Flex>
                </div>
                :<div style={{color:"#fff",height:"100%",paddingTop:".2rem",paddingBottom:".2rem"}}>
                        <Flex justify="between">
                            <div style={{background:"#00E079",width:"70%",padding:".2rem 0 .2rem .2rem"}}>
                                <span style={{fontSize:".35rem"}}>秒杀价</span>
                                <Flex style={{marginTop:".25rem"}}>
                                    <div>
                                        ¥<span style={{fontSize:".5rem",marginRight:".2rem"}}>{goodsDetailInfo.activityPrice }</span>
                                    </div>
                                    <div>
                                        <div style={{textDecoration:"line-through"}}>¥{goodsDetailInfo.storePrice}</div>
                                        <div>{goodsDetailInfo.remindNum}人关注</div>
                                    </div>
                                </Flex>
                            </div>
                            <Flex justify="center" style={{width:"30%",background:"#e1fbef",textAlign:"center",padding:".35rem 0"}}>
                                <div style={{width:"100%"}}>
                                    <div style={{color:"#00E079"}}>
                                        距开始
                                        <span>{d<10?"0"+d:d}</span> 天
                                        <span>{showHour<10?"0"+showHour:showHour}</span>  :
                                        <span>{m<10?"0"+m:m}</span>:
                                        <span>{s<10?"0"+s:s}</span>
                                    </div>
                                    <Flex>
                                        {goodsDetailInfo.activityInventory.split("").map((r,i)=>{
                                            return <div key={i} style={{color:"#fff",background:"#00E079",marginRight:".1rem",width:".4rem",height:".4rem",borderRadius:".05rem",display:"flex",justifyContent:"center",alignItems:"center"}}>{r}</div>
                                        })}
                                        <div  style={{color:"#fff",background:"#00E079",marginRight:".1rem",width:".4rem",height:".4rem",borderRadius:".05rem",display:"flex",justifyContent:"center",alignItems:"center"}}>件</div>
                                    </Flex>
                                </div>
                            </Flex>
                        </Flex>
                </div>}

        </div>

    }
}

export default connect(({ goodsDetail }) => ({ goodsDetail }))(SecKill);